<template>
  <div class="app-container">
    <!--导入 导出按钮-->
    <div class="el-toolbar">
      <div class="el-toolbar-body" style="justify-content: flex-start;">
        <a href="http://localhost:8202/cmn/dict/exportDictData" target="_blank">
          <el-button type="text"><i class="fa fa-plus"/>导出</el-button>
        </a>
        <el-button @click="importData" type="text"><i class="fa fa-plus"/>导入</el-button>
      </div>
    </div>
    <!--导入弹出对话框-->
    <el-dialog :visible.sync="dialogImportVisible" title="导入" width="480px">
      <el-form label-position="right" label-width="170px">

        <el-form-item label="文件">

          <el-upload
            :action="'http://localhost:8202/cmn/dict/importDictData'"
            :multiple="false"
            :on-success="onUploadSuccess"
            class="upload-demo">
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip" slot="tip">只能上传excel文件，且不超过500kb</div>
          </el-upload>

        </el-form-item>

      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogImportVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <!--数据字典列表-->
    <el-table
      :data="list"
      :load="getChildrens"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      border
      lazy
      row-key="id"
      style="width: 100%"
    >
      <el-table-column align="left" label="名称" width="230">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编码" width="220">
        <template slot-scope="{row}">
          {{ row.dictCode }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="值" width="230">
        <template slot-scope="scope">
          <span>{{ scope.row.value }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import dictionary from "../../api/dictionary";

  export default {
    name: "list",
    //import引入的组件需要注入到对象中才能使用",
    components: {},
    data() {
      //这里存放数据",
      return {
        list: [],//字典数据列表
        dialogImportVisible: false,//设置弹框是否弹出
      };
    },
    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
    created() {
      this.getChildDataById(1)
    },
    //方法集合",
    methods: {
      //获取导入Url
      getImportDictDataUrl() {
        dictionary.importDictData().then(response => {
          console.log(response)
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '数据错误或重复'
          });
        })
      },

      //导入数据
      importData() {
        this.dialogImportVisible = true
      },
      //上传成功调用
      onUploadSuccess() {
        //关闭弹框
        this.dialogImportVisible = false;
        //刷新页面
        this.getChildDataById(1)
      },

      //查询子级的列表
      getChildrens(tree, treeNode, resolve) {
        dictionary.findChildData(tree.id).then(response => {
          resolve(response.data)
        })
      },
      /**
       * 根据数据字典id查询子数据列表
       * @param id
       */
      getChildDataById(id) {
        dictionary.findChildData(id)
          .then(response => {
            this.list = response.data
          })
      }
    },
    //监听属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
    beforeCreate() {
    },
    //生命周期 - 挂载之前",html模板未渲染
    beforeMount() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
    mounted() {

    },

    //生命周期 - 更新之前",数据模型已更新,html模板未更新
    beforeUpdate() {

    },
    //生命周期 - 更新之后",数据模型已更新,html模板已更新
    updated() {

    },
    //生命周期 - 销毁之前",
    beforeDestroy() {

    },
    destroyed() {

    },
    //生命周期 - 销毁完成",
    //如果页面有keep-alive缓存功能，这个函数会触发",
    activated() {

    }
  }
</script>

<style scoped>

</style>
